import React, { Suspense } from 'react'
import { Route, BrowserRouter, Routes, Navigate } from 'react-router-dom'
import routes from './routerConfig'
import { ROUTERITEM } from '../type/router.d'
export default function RouterView() {
  const renderDom = (routes: ROUTERITEM[]) => {
    return routes.map((item, index) => {
      return <Route key={index} path={item.path} element={item.to ? <Navigate to={item.to} /> : <item.component />}>
        {
          item.children && renderDom(item.children)
        }
      </Route>
    })
  }
  return (
    <BrowserRouter>
      <Suspense fallback={<div>loading...</div>}>
        <Routes>
          {
            renderDom(routes)
          }
        </Routes>
      </Suspense>
    </BrowserRouter>
  )
}
